<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Img - Standalone</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <link href="../../../../../css/core.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

<body class="ion-padding" onLoad="render()">
  <h2>Default</h2>
  <ion-img src=""></ion-img>

  <h2>Custom Width</h2>
  <ion-img class="custom-width" src=""></ion-img>

  <h2>Custom Height</h2>
  <ion-img class="custom-height" src=""></ion-img>

  <h2>Custom Height / Fit</h2>
  <ion-img class="custom-height-fit" src=""></ion-img>

  <h2>Grid of Images</h2>
  <ion-grid id="imageGrid"></ion-grid>

  <style>
    .custom-width {
      width: 300px;
    }

    .custom-height {
      height: 100px;
    }

    .custom-height-fit {
      height: 100px;
      object-fit: cover;
    }
  </style>

  <script>
    let images = [];
    for (var i = 0; i < 15; i++) {
      images.push(i);
    }
    const grid = document.getElementById('imageGrid');

    function render() {
      let html = '';

      for (let image of images) {
        // First image, start the row
        if (image % 5 === 0) {
          html += '<ion-row>';
        }

        html += `
          <ion-col>
            ${image}
            <ion-img src="">
          </ion-col>
        `;

        // If this is the last image in the row end it
        if ((image - 4) % 5 === 0) {
          html += '</ion-row>';
        }
      }
      grid.innerHTML = html;
    }
  </script>
</body>

</html>
